;
(function(window) {

  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        if (el.contains(e.target)) {
          return false;
        }
        if (binding.expression) {
          binding.value(e);
        }
      }

      el.__vueClickOutside__ = documentHandler;
      document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
      document.removeEventListener('click', el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    },
  };

  const hlCascader = {
    template: `<div class="hl-cascader__container"
         :style="{ 'width': selectWidth + 'px'}"
         :class="[ block ? 'is-block' : '' ]"
         v-clickoutside="handleClose"
    >
      <div class="hl-cascader__header"
          :style="{ 'width': selectWidth + 'px'}"
          :class="[
            type ? 'hl-cascader-' + type : '',
          ]"
          @click="handleClickInput"
      >
        <input class="hl-cascader__input" type="text" readonly="readonly" autocomplete="off" :placeholder="placeholder" v-model="inputText">
        <span class="icon hl-arrow-down-icon"></span>
      </div>
      <!-- 一级菜单 -->
      <div
        class="hl-cascader-dropdown__container hl-cascader-dropdown__first-node"
        :style="{ 'width': selectDropdownWidth + 'px' , 'max-height': selectDropdownHeight + 'px'}"
        v-if="dropdownIsShow"
      >
        <i  class="hl-cascader-dropdown__loading-icon"></i>
        <ul class="hl-cascader-dropdown__wrap">
          <li class="hl-cascader-dropdown__item"
              :class="{ 'active':selectedCodeData.indexOf(item.code) > -1 }"
              :data-code="item.code"
              v-for="(item,index) in _primaryData"
              @click="selectOneNode(item,index)"
          >
            {{item.name}}
            <span class="icon icon-Gm-next" v-if="_secondaryData.length !== 0"></span>
          </li>
        </ul>
      </div>
      <!-- 二级菜单 -->
      <div
        class="hl-cascader-dropdown__container hl-cascader-dropdown__second-node"
        :style="{ 'width': selectDropdownWidth + 'px' , 'max-height': selectDropdownHeight + 'px' , 'left': selectDropdownWidth + 'px'}"
        v-if="dropdownIsShow && _secondaryData.length !== 0 "
      >
        <i  class="hl-cascader-dropdown__loading-icon"></i>
        <ul class="hl-cascader-dropdown__wrap">
          <li class="hl-cascader-dropdown__item"
              :class="{ 'active':selectedCodeData.indexOf(item.code) > -1 }"
              :data-code="item.code"
              v-for="(item,index) in _secondaryData"
              @click="selectTwoNode(item,index)"
          >
            {{item.name}}
            <span class="icon icon-Gm-next" v-if="_tertiaryData.length !== 0"></span>
          </li>
        </ul>
      </div>
      <!-- 三级菜单 -->
      <div
        class="hl-cascader-dropdown__container hl-cascader-dropdown__third-node"
        :style="{ 'width': selectDropdownWidth + 'px' , 'max-height': selectDropdownHeight + 'px' , 'left': selectDropdownWidth * 2 + 'px'}"
        v-if="dropdownIsShow && _tertiaryData.length !== 0 "
      >
        <i  class="hl-cascader-dropdown__loading-icon"></i>
        <ul class="hl-cascader-dropdown__wrap">
          <li class="hl-cascader-dropdown__item"
              :class="{ 'active':selectedCodeData.indexOf(item.code) > -1 }"
              :data-code="item.code"
              v-for="(item,index) in _tertiaryData"
              @click="selectThreeNode(item,index)"
          >{{item.name}}</li>
        </ul>
      </div>
    </div>`,
    data() {
      return {
        _primaryData:[],
        _secondaryData:[],
        _tertiaryData:[],
        selectedCodeData:[],
        selectedValData:[],
        dropdownIsShow:false,
      }
    },
    model: {
      prop: 'selected',
      event: 'on-select-item'
    },
    props:{
      primaryData:{
        type:Array,
        default:() => []
      },
      secondaryData:{
        type:Array,
        default:() => []
      },
      tertiaryData:{
        type:Array,
        default:() => []
      },
      selected: {
        type: Array,
        default: () => []
      },
      separator:{
        type:String,
        default:' - '
      },
      width:{
        type:[String,Number],
        default:0
      },
      dropdownWidth:{
        type:Number,
        default:156
      },
      dropdownHeight:{
        type:[String,Number],
        default:200
      },
      size: {
        type:String,
        default:'medium'
      },
      type: {
        type:String,
        default:'default'
      },
      block: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
    },
    directives: {
      clickoutside
    },
    computed:{
      inputText(){
        if(this.selectedValData.length == 0) return ''

        return this.selectedValData.join(this.separator)
      },
      selectWidth(){
        // 如果用户传入 width 值，则优先 width  其次参考 size
        if(this.width !== 0) return this.width

        if(this.size == 'samll') this.width = 126
        if(this.size == 'medium') this.width = 156
        if(this.size == 'large') this.width = 310

        return this.width
      },
      selectDropdownWidth(){
        return this.dropdownWidth
      },
      selectDropdownHeight(){
        return this.dropdownHeight
      },
    },
    watch:{
      primaryData(val){
        console.log(val);

        this._primaryData = val
        this.getSelectedCodeData()
      },
      secondaryData(val){
        this._secondaryData = val
        this.getSelectedCodeData()
      },
      tertiaryData(val){
        this._tertiaryData = val
        this.getSelectedCodeData()
      },
      selected(val){
        this.selectedValData = val
      }
    },
    created(){
      this._primaryData = this.primaryData
      this._secondaryData = this.secondaryData
      this._tertiaryData = this.tertiaryData
      this.selectedValData = this.selected

      this.getSelectedCodeData()
    },
    methods:{
      selectOneNode(item,i){
        this.resetData(0)
        this.selectedValData.push(item.name)
        this.getSelectedCodeData()

        const res = {'cur':item,'curIndex':i,text:this.inputText.split(this.separator),code:this.selectedCodeData}
        this.$emit('on-primary-change',res)
      },
      selectTwoNode(item,i){
        this.resetData(1)
        this.selectedValData.push(item.name)
        this.getSelectedCodeData()

        const res = {'cur':item,'curIndex':i,text:this.inputText.split(this.separator),code:this.selectedCodeData}
        this.$emit('on-secondary-change',res)
      },
      selectThreeNode(item,i){
        this.resetData(2)
        this.selectedValData.push(item.name)
        this.getSelectedCodeData()

        const res = {'cur':item,'curIndex':i,text:this.inputText.split(this.separator),code:this.selectedCodeData}
        this.$emit('on-tertiary-change',res)
      },
      handleClickInput() {
        this.dropdownIsShow = true
        this.$emit('on-click', event)
      },
      handleClose() {
        this.dropdownIsShow = false
        this.$emit('on-visible-change', false)
      },
      // 获取选中的数据code
      getSelectedCodeData(){
        if(this.primaryData.length == 0) return []
        const valueArr = this.selectedValData
        let codeArr = []

        // 有一级数据
        if(valueArr.length && this._primaryData.length ){
          codeArr.push(this.getCode(this._primaryData,valueArr[0]))
        }
        // 有二级数据
        if(valueArr.length && this._secondaryData.length){
          if(valueArr[1]) codeArr.push(this.getCode(this._secondaryData,valueArr[1]))
        }
        // 有三级数据
        if(valueArr.length && this._tertiaryData.length){
          if(valueArr[2]) codeArr.push(this.getCode(this._tertiaryData,valueArr[2]))
        }

        this.selectedCodeData = codeArr
      },
      getCode(data,value){
        return data.filter(el => el.name == value)[0]['code']
      },
      resetData(i){
        if(i == 0){
          this.selectedValData = []
          this.selectedCodeData = []
          this._secondaryData = []
          this._tertiaryData = []
        }

        if(i == 1){
          this.selectedValData.splice(i)
          this.selectedCodeData.splice(i)
          this._tertiaryData = []
        }

        if(i == 2){
          this.selectedValData.splice(i,1)
          this.selectedCodeData.splice(i,1)
        }
      }
    }

  }

  Vue.component('hl-cascader', hlCascader)

}(window))
